<template>
  <div>
    <div class="container_1" ref="con1">
      <div class="img_box_1">
        <div class="music_list">
          <Tlist :songList="songlist" iconName="icon-yinle1" />
        </div>
      </div>
      <div class="box_text">
        <span>《我喜欢的音乐》</span>
        <icon-font type="icon-yinpinbofang" style="font-size: 30px;" />
        <span></span>
        <icon-font type="icon-qiehuan" style="font-size: 30px;" />
      </div>
    </div>
    <div class="container_2">
      <div class="img_box_2">
        <div class="music_list">
          <Tlist :songList="newSonglist" iconName="icon-yinpinbofang" />
        </div>
      </div>
      <div class="box_text">
        <span>《⭐每日推荐⭐》</span>
        <icon-font type="icon-yinpinbofang" style="font-size: 30px;" />
        <span></span>
        <icon-font type="icon-qiehuan" style="font-size: 30px;" @click="reload"/>
      </div>
    </div>
    <div class="container_3">
      <div class="img_box_4">
        <div class="music_list">
          <Tlist :songList="songlist2" iconName="icon-yinfu1" />
        </div>
      </div>
      <div class="box_text">
        <span @click="">《{{ songlist2Text }}》</span>
        <icon-font type="icon-yinpinbofang" style="font-size: 30px;" />
        <span></span>
        <icon-font type="icon-qiehuan" style="font-size: 30px;" @click="reload" />
      </div>
    </div>
    <div class="container_4">
      <div class="img_box_5">
        <div class="music_list">
          <Tlist :songList="songlist3" iconName="icon-xin-yinfu" />
        </div>
      </div>
      <div class="box_text">
        <span @click="">{{ songlist3Text}}</span>
        <icon-font type="icon-yinpinbofang" style="font-size: 30px;" />
        <span></span>
        <icon-font type="icon-qiehuan" style="font-size: 30px;" @click="reload" />
      </div>
    </div>
    <div class="container_5">
      <div class="img_box_6"></div>
    </div>
    <div class="container_6">
      <div class="img_box_6"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watchEffect, computed, watch, nextTick } from 'vue'
import { IconFont } from '@/base-ui/Icons/index'
import Tlist from '@/base-ui/TList/src/TList.vue';
import { useStore } from '@/store';


const store = useStore()
const url = '/src/assets/img/hong.jpg'
const con1 = ref<HTMLElement | null>(null)


store.dispatch('main/getSingListAction')
store.dispatch('main/getNewSingAction')
// store.dispatch('main/getSingListAction'



const songlist = store.state.main.userPlayList
const newSonglist = store.state.main.newPlayList

const songlist2Text = ref('')
const songlist3 = ref('' as any)
const songlist3Text = ref('')
const songlist2 = ref('' as any)


// const songlist = computed(()=>store.state.main.userPlayList)
// const newSonglist = computed(()=>store.state.main.newPlayList)
// const songlist2Text = computed(()=>store.state.main.playList?.listName)
// const songlist3 = computed(()=>store.state.main.playList?.listInfo2.slice(0, 8))
// const songlist3Text = computed(()= store.state.main.playList?.listName2)
// const songlist2 = computed(()=>store.state.main.playList?.listInfo.slice(0, 8))


watchEffect(()=>{
songlist2Text.value =  store.state.main.playList?.listName
songlist3.value =  store.state.main.playList?.listInfo2.slice(0, 8)
songlist3Text.value = store.state.main.playList?.listName2
songlist3.value =  store.state.main.playList?.listInfo2.slice(0, 8)
songlist2.value =  store.state.main.playList?.listInfo.slice(0, 8)
})

// songlist2Text.value =  store.state.main.playList?.listName
// songlist3.value =  store.state.main.playList?.listInfo2.slice(0, 8)
// songlist3Text.value = store.state.main.playList?.listName2
// if(store.state.main.playList !== null) {
//   songlist3.value =  store.state.main.playList?.listInfo2.slice(0, 8)
// songlist2.value =  store.state.main.playList?.listInfo.slice(0, 8)
// }


// window.location.reload()
const reload =()=>{
 window.location.reload()
}

</script>
<style lang="less" scoped>
.music_list {
  margin-top: 100px;
}

.box_text {
  background-color: rgb(118, 118, 216);
  margin-top: 250px;
  height: 80px;
  width: 300px;
  text-align: center;
  span {
    margin-top: 20px;
  }
}
.container_1 {
  transform: rotate(6deg);
  width: 300px;
  height: 820px;
  margin-left: 110px;
  background-image: url(/src/assets/img/hong.jpg);
  margin-right: 45px;
  float: left;
  background-size: 140%;
  background-position: -50px -6px;
  background-repeat: no-repeat;
  box-shadow: 0.5rem 0.5rem 0.5rem @greyLight-2, -0.4rem -0.4rem 0.8rem @white;
  &:hover {
    animation: img1 1s ease-in-out forwards;
    .box_text {
      animation: imgtext 1s ease-in-out reverse;
      width: 350px;
    }
  }
}
.container_2 {
  transform: rotate(6deg);
  width: 300px;
  height: 820px;
  margin-left: 110px;
  background-image: url(/src/assets/img/高达.jpg);
  margin-right: 40px;
  float: left;
  background-size: 140%;
  background-position: -55px -6px;
  background-repeat: no-repeat;
  box-shadow: 0.5rem 0.5rem 0.6rem @greyLight-2, -0.4rem -0.4rem 0.8rem @white;
  &:hover {
    animation: img1 1s ease-in-out forwards;
    .box_text {
      animation: imgtext 1s ease-in-out reverse;
      width: 350px;
    }
  }
}
.container_3 {
  transform: rotate(6deg);
  width: 300px;
  height: 820px;
  margin-left: 110px;
  background-image: url(/src/assets/img/我妻善逸.jpg);
  margin-right: 40px;
  float: left;
  background-size: 140%;
  background-position: -68px -6px;
  background-repeat: no-repeat;
  box-shadow: 0.5rem 0.5rem 0.6rem @greyLight-2, -0.4rem -0.4rem 0.8rem @white;
  &:hover {
    animation: img2 1s ease-in-out forwards;
    .box_text {
      animation: imgtext 1s ease-in-out reverse;
      width: 350px;
    }
  }
}
.container_4 {
  transform: rotate(6deg);
  width: 300px;
  height: 820px;
  margin-left: 110px;
  background-image: url(/src/assets/img/歌.jpg);
  margin-right: 40px;
  float: left;
  background-size: 140%;
  background-position: -65px -6px;
  background-repeat: no-repeat;
  box-shadow: 0.5rem 0.5rem 0.6rem @greyLight-2, -0.4rem -0.4rem 0.8rem @white;
  &:hover {
    animation: img3 1s ease-in-out forwards;
    .box_text {
      animation: imgtext 1s ease-in-out reverse;
      width: 350px;
    }
  }
}
.container_5 {
  transform: rotate(6deg);
  width: 300px;
  height: 820px;
  margin-left: 110px;
  background-image: url(/src/assets/img/hong.jpg);
  margin-right: 40px;
  float: left;
  background-size: 140%;
  background-position: -50px -6px;
  background-repeat: no-repeat;
  box-shadow: 0.5rem 0.5rem 0.6rem @greyLight-2, -0.4rem -0.4rem 0.8rem @white;
}
.container_6 {
  transform: rotate(6deg);
  width: 300px;
  height: 820px;
  margin-left: 110px;
  background-image: url(/src/assets/img/hong.jpg);
  margin-right: 40px;
  float: left;
  background-size: 140%;
  background-position: -50px -6px;
  background-repeat: no-repeat;
  box-shadow: 0.5rem 0.5rem 0.6rem @greyLight-2, -0.4rem -0.4rem 0.8rem @white;
}
</style>
